﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="renderer" content="webkit" />
    <meta name="x5-fullscreen" content="true">
    <meta name="full-screen" content="yes">
    <title>Title</title>
    <link href="../../css/base/reset.css" rel="stylesheet" />
    <link href="../../css/base/base.scss" rel="stylesheet" />
    <!--<link href="css/fonts/icomoon/style.css" rel="stylesheet" />-->
    <link href="../../plugins/modal/modal.css" rel="stylesheet" />
    <link href="../../plugins/swiper3/swiper.min.css" rel="stylesheet" />
    <link href="../../css/struct/custom.scss" rel="stylesheet" />
    <link href="../../css/struct/layout.scss" rel="stylesheet" />
    <link href="../../css/theme/dark/style.scss" rel="stylesheet" />
</head>
<body>
    <div class="background"></div>
    <div class="wrapper" data-struct="footer">
        <div class="container nogap" role="main">
            <video class="player"></video>
            <div class="tab-targets padding-10">
                <div id="intro">
                    <h4 class="strong margin-bottom-10">篮球场上的数学原理</h4>
                    <p>社会 / 美国</p>
                    <p>
                        篮球场上的数学原理篮球场上的数学原理篮球场上的数学原理篮球场上的数学原理
                        篮球场上的数学原理篮球场上的数学原理篮球场上的数学原理
                    </p>
                </div>
                <div id="chapter">
                    <ul class="list link list-chapter list-corner">
                        <li>
                            <a href="#">
                                <p class="title">第一节 篮球场上的数学原理</p>
                                <p class="text-gray-light">日期：2016-05-25</p>
                            </a>
                            <ul class="tabs two">
                                <li><i class="icomoon icon-pencil"></i> 考试</li>
                                <li class="disabled"><i class="icomoon icon-paper"></i> 调研</li>
                            </ul>
                            <div class="corner corner-primary">
                                <div class="corner-wrapper corner-text">
                                    100%
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <p class="title">
                                    <i class="icomoon icon-lock-fill"></i>
                                    第一节 篮球场上的数学原理
                                </p>
                                <p class="text-gray-light">日期：2016-05-25</p>
                            </a>
                            <ul class="tabs two">
                                <li><i class="icomoon icon-pencil"></i> 考试</li>
                                <li class="disabled"><i class="icomoon icon-paper"></i> 调研</li>
                            </ul>
                            <div class="corner corner-primary">
                                <div class="corner-wrapper corner-text">
                                    75%
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <p class="title">
                                    <i class="icomoon icon-lock-fill"></i>
                                    第一节 篮球场上的数学原理
                                </p>
                                <p class="text-gray-light">日期：2016-05-25</p>
                            </a>
                            <ul class="tabs two">
                                <li><i class="icomoon icon-pencil"></i> 考试</li>
                                <li class="disabled"><i class="icomoon icon-paper"></i> 调研</li>
                            </ul>
                            <div class="corner corner-primary">
                                <div class="corner-wrapper corner-text">
                                    75%
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <p class="title">
                                    <i class="icomoon icon-lock-fill"></i>
                                    第一节 篮球场上的数学原理
                                </p>
                                <p class="text-gray-light">日期：2016-05-25</p>
                            </a>
                            <ul class="tabs two">
                                <li><i class="icomoon icon-pencil"></i> 考试</li>
                                <li class="disabled"><i class="icomoon icon-paper"></i> 调研</li>
                            </ul>
                            <div class="corner corner-primary">
                                <div class="corner-wrapper corner-text">
                                    75%
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div id="note">
                    <textarea id="txtNote"></textarea>
                </div>
                <div id="comment">
                    <div class="component-emoticon">
                        <textarea id="txtComment"></textarea>
                        <div>
                            <div class="align-left">
                                <div class="btn-switch btn-emoticon" data-input="#txtComment">
                                    <i class="icomoon icon-laugh"></i>
                                    <i class="icomoon icon-keyboard"></i>
                                </div>
                            </div>
                            <div class="align-right">
                                <button id="btnPublish" type="button" class="btn btn-xs btn-theme" data-dismiss="emoticon" data-clear="#txtComment">发表</button>
                            </div>
                        </div>
                        <div data-part="emoticon"></div>
                    </div>
                    <ul id="listEmoticon" class="list nogap list-comment">
                        <li>
                            <p class="small">
                                <span class="margin-right-10">上海市网友</span>
                                <span>2016-10-10 15:20</span>
                            </p>
                            <div class="comment">
                                [微笑][微笑][微笑]
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <footer class="footer">
            <nav>
                <ul class="nav tabs three" data-toggle="tabs">
                    <li data-target="#intro">
                        <div class="tab-icon">
                            <i class="icomoon icon-book"></i>
                            <i class="icomoon icon-book"></i>
                        </div>
                        <div class="tab-text">介绍</div>
                    </li>
                    <li class="active" data-target="#chapter">
                        <div class="tab-icon">
                            <i class="icomoon icon-paper"></i>
                            <i class="icomoon icon-paper"></i>
                        </div>
                        <div class="tab-text">章节</div>
                    </li>
                    <!--<li data-target="#note">
                        <div class="tab-icon">
                            <i class="icomoon icon-compass"></i>
                            <i class="icomoon icon-compass-fill"></i>
                        </div>
                        <div class="tab-text">笔记</div>
                    </li>-->
                    <li data-target="#comment">
                        <div class="tab-icon">
                            <i class="icomoon icon-edit"></i>
                            <i class="icomoon icon-edit"></i>
                        </div>
                        <div class="tab-text">评论</div>
                    </li>
                </ul>
            </nav>
        </footer>
    </div>
    <div id="modal" class="modal-wrapper">
        <div class="modal-container modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="message">这是测试弹窗</div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../js/jquery/jquery-1.11.2.js"></script>
    <script src="../../js/fastclick/fastclick.js"></script>
    <script src="../../plugins/modal/modal.js"></script>
    <script src="../../plugins/swiper3/swiper.jquery.min.js"></script>
    <script src="../../js/global.js"></script>
    <script type="text/javascript">
        $(function () {
            //表情
            Global.Emoticon.Load();

            $("#btnPublish").click(function () {
                var comment = $("#txtComment").val();
                if (comment == "") {
                    modal.message({
                        content: "请输入评论内容",
                        duration: 2000,
                        onclose: function(){
                            console.log("modal closed");
                        }
                    });
                    return;
                }
                appendComment(Global.Emoticon.Replace(comment));
            });
            Global.Emoticon.LoadConfig(function () {
                //如果页面不加载表情插件，必须保证配置文件加载后才能转义
                $("#listEmoticon > li .comment").each(function () {
                    $(this).html(Global.Emoticon.Replace($(this).text())); 
                });
            });

            function appendComment(comment){
                var $li = $("#listEmoticon > li:first").clone();
                $li.find(".comment").html(comment);
                $("#listEmoticon").append($li);
            }
        })
    </script>
</body>
</html>